<!DOCTYPE html>
<html lang="en">
<script src="../static/js/register.js"></script>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>无聊小镇--注册</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/communtiy.css">
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/register.js"></script>
</head>
<body>
<div class="juzhong">
    <form action="/register" method="post" style="background: black; padding:25px  15px;opacity: 0.9;margin-top: -35px;border-radius: 20px">
        <div class="input-group">
            <span class="input-group-addon" >用户名</span>
            <input id="name" name="name" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon" >密码</span>
            <input id="pwd1" name="password" type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon" >确认密码</span>
            <input id="pwd2" name="password2" type="password" class="form-control" placeholder="请再次输入密码" aria-describedby="basic-addon1">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon" >验证码</span>
            <input id="verifycode" name="verifycode" type="text" class="form-control" placeholder="请输入下方验证码" aria-describedby="basic-addon1">
        </div>
        <br>
        <canvas id="canvas" width="140" height="35"></canvas>
        <br>
        <div th:if="${session.wrong == 'exist'}" class="alert alert-warning">
            <a href="#" class="close" data-dismiss="alert">
                &times;
            </a>
            <strong>非常抱歉！</strong>这个账户名已经被使用。
        </div>
        <div th:if="${session.wrong == 'fail'}" class="alert alert-warning">
            <a href="#" class="close" data-dismiss="alert">
                &times;
            </a>
            <strong>错误！</strong>遇到了未知问题，请重试。若一直出现此问题请联系管理员。
        </div>
        <br>
        <button type="submit" class="btn btn-default" onclick="return validate()" >注册</button>&nbsp;&nbsp;
        <a href="/login" style="color: #ff6666">返回登录界面</a>
        <br>
        <br>
    </form>
    <br>
    <a data-toggle="modal" data-target="#myModal1" style="cursor: pointer; color: #333333">用户注册/登录须知</a>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel" style="cursor: pointer">
                        用户注册/登录须知
                    </h4>
                </div>
                <div class="modal-body">
                    <b>本站注册时不需要提供手机号，邮箱，完全不会访问您的个人信息</b> <br>
                    当然，这样做的代价是您必须妥善保管您的密码，我们不提供任何形式的密码找回服务。<br>
                    用户注册时请不要使用党和国家领导人或其他名人的真实姓名、字号、艺名、笔名，或国家机构和其他机构的名字及与之相仿的名字，
                    我们会封停名字不合法的用户！<br>
                    <strong>如果您的注册用户名中包含空格及部分特殊符号，这些符号会被自动剔除。回到登录界面时，我们会为您展示经修改后的用户名</strong>
                    如您非常需要带空格的特殊名字，如“影 流 之 主”，请联系下方的邮箱。我们会不定期抽取幸运用户获得专属名字 <br>
                    <strong>管理员邮箱：1517569064@qq.com</strong>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
</body>
</html>